<template>
  <div>
    <el-container class="app-container">
      <el-aside width="200px">
        <el-input
          v-model="filterText"
          size="medium"
          style="margin-top: 4px;margin-bottom: 3px;"
          placeholder="输入关键字进行过滤"
        />
        <el-tree
          ref="tree"
          :data="treeData"
          node-key="id"
          :props="treeOption.defaultProps"
          :default-expand-all="true"
          :filter-node-method="filterNode"
          :check-on-click-node="true"
          :highlight-current="true"
          :expand-on-click-node="false"
          @node-contextmenu="showMenu"
          @node-click="handleNodeClick"
        >
          <span slot-scope="{ node, data }" class="span-ellipsis">
            <span :title="node.label"><i :class="[treeOption.iconMap[data.classify_level]]" />{{ node.label }}</span>
          </span>
        </el-tree>
      </el-aside>
      <el-container>
        <el-main>
          <casePage :classify-node="classifyNode" />
        </el-main>
      </el-container>
    </el-container>
    <div v-show="treeMenu.menuVisible" id="menu" class="tree-menu">
      <ul>
        <li :class="{'menu-item-disabled':!treeMenu.menuStatus.add}" @click.stop="handleMenuAdd"><i class="el-icon-folder-add" /> 添加子节点</li>
        <li :class="{'menu-item-disabled':!treeMenu.menuStatus.edit}" @click.stop="handleMenuEdit"><i class="el-icon-edit" /> 编辑</li>
        <li :class="{'menu-item-disabled':!treeMenu.menuStatus.delete}" @click.stop="handleMenuDelete"><i class="el-icon-folder-delete" /> 删除</li>
        <li><i class="el-icon-close" /> 取消</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { listCaseCategory, addNode, editNode, delNode } from '@/api/caseStep.js'
import { parseTreeData } from '@/utils/commonUtil.js'
import casePage from './case.vue'

export default {
  components: {
    casePage
  },
  data() {
    return {
      classifyNode: undefined,
      treeData: null,
      filterText: '',
      treeMenu: {
        menuVisible: false,
        menuStatus: {
          add: true,
          edit: true,
          delete: true
        },
        currentNode: undefined
      },
      treeOption: {
        defaultProps: {
          label: 'classify_name',
          children: 'children'
        },
        iconMap: {
          '0': 'el-icon-s-tools',
          '1': 'el-icon-folder'
        }
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getNodeData()
  },
  methods: {
    // 处理点击
    handleNodeClick(data) {
      this.classifyNode = data
    },
    // 前端搜索节点，有问题
    filterNode(value, data) {
      if (!value) return true
      return data.classify_name.indexOf(value) !== -1
    },
    // 右键菜单
    showMenu(MouseEvent, object, Node, element) {
      this.treeMenu.currentNode = object

      this.treeMenu.menuStatus.add = true
      this.treeMenu.menuStatus.delete = true
      this.treeMenu.menuStatus.edit = true

      if (object.classify_level === 0) {
        this.treeMenu.menuStatus.edit = false
        this.treeMenu.menuStatus.delete = false
      }

      this.treeMenu.menuVisible = false
      this.treeMenu.menuVisible = true
      const menu = document.querySelector('#menu')
      menu.style.cssText = 'position: fixed; left: ' + MouseEvent.clientX + 'px' + '; top: ' + MouseEvent.clientY + 'px; z-index: 2; cursor:pointer;'
      document.addEventListener('click', this.foo)
    },
    foo() {
      // 取消鼠标监听事件 菜单栏
      this.treeMenu.menuVisible = false
      document.removeEventListener('click', this.foo)
    },
    handleMenuAdd() {
      if (!this.treeMenu.menuStatus.add) {
        return
      }
      this.foo()
      this.$prompt('请输入新增节点名称', '新增节点', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: '新节点',
        inputPattern: /.{3,}/,
        inputErrorMessage: '请至少输入三个字符'
      }).then(({ value }) => {
        addNode({
          classify_level: 1,
          classify_name: value,
          parent_classify_id: this.treeMenu.currentNode.id
        }).then(response => {
          this.$refs.tree.append(response.data, this.treeMenu.currentNode)
          this.$message.success('新增节点成功')
        })
      }).catch(() => {})
    },
    handleMenuEdit() {
      if (!this.treeMenu.menuStatus.edit) {
        return
      }

      this.foo()
      this.$prompt('请输入新的节点名称', '修改节点名称', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: this.treeMenu.currentNode.classify_name,
        inputPattern: /.{3,}/,
        inputErrorMessage: '请至少输入三个字符'
      }).then(({ value }) => {
        if (this.treeMenu.currentNode.classify_name === value) {
          return
        }
        editNode({
          id: this.treeMenu.currentNode.id,
          classify_name: value
        }).then(response => {
          this.treeMenu.currentNode.classify_name = value
          this.$message.success('修改节点名称成功')
        })
      }).catch(() => {})
    },
    handleMenuDelete() {
      if (!this.treeMenu.menuStatus.delete) {
        return
      }
      this.foo()
      this.$confirm('确定要删除该节点以及该节点的下属节点吗？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delNode({
          id: this.treeMenu.currentNode.id
        }).then(response => {
          this.$refs.tree.remove(this.treeMenu.currentNode)
          this.$message.success('删除成功')
        })
      })
    },
    getNodeData() {
      listCaseCategory().then(response => {
        const data = response.data
        this.treeData = parseTreeData(data.filter(item => item.classify_level === 0), data, (item, node) => item.parent_classify_id === node.id)
      })
    }
  }
}
</script>
<style scoped>
  .el-main {
    padding: 4px;
  }
 .span-ellipsis {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .tree-menu {
    position: fixed;
    display: block;
    z-index: 20000;
    background-color: #fff;
    padding:5px 0;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    box-shadow:0 2px 12px 0 rgba(0,0,0,.1);
  }
  ul{
    margin:0;
    padding:0;
  }
  ul li{
    list-style: none;
    margin:0;
    padding:0 15px;
    font-size: 14px;
    line-height: 30px;
    cursor: pointer;
  }
  ul li:hover{
    background-color: #ebeef5
  }
  .menu-item-disabled {
    cursor: not-allowed;
    color: #e4e7ed;
  }
</style>
